<template>
  <div class="page  page-enai">
    <!-- 背景 -->
    <div class="container-bg"><img src="@/assets/bg_common.jpg" class="bg"></div>
    <!-- ui组 -->
    <div class="container-ui-group">
      <!-- 照片 -->
      <div class="container-photo"><img ref="photo" src="@/assets/item_photo.png" class="photo"></div>
      <!-- 上传按钮 -->
      <label for="upload-btn-enai" class="upload-btn-enai">
        <input v-show="false" id="upload-btn-enai" type="file" @change="inputChangeHandler">
        <div class="container-btn-upload">
          <img src="@/assets/btn_upload.png" class="btn-upload">
        </div>
      </label>
      <!-- 下一步按钮 -->
      <div v-show="showBtn" class="container-btn-next" @click="routerLink('enai2')"><img src="@/assets/btn_next.png" class="next"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showBtn: false
    }
  },
  methods: {
    inputChangeHandler(evt) {
      const file = evt.target.files[0]
      const blobImg = URL.createObjectURL(file)
      this.$refs.photo.src = blobImg
      this.$store.dispatch('app/uploadImg', blobImg)
        .then(() => {
          console.log('照片上传成功')
          this.showBtn = true
        })
        .catch(() => {
          console.log('照片上传失败')
        })
    },
    routerLink(router) {
      this.$router.goTo(this, router)
    }
  }
}
</script>

<style lang="less">
.page-enai {
  div {
    display: inline-block;
  }
  .container-ui-group {
    width: 56%;
    position: absolute;
    top: calc(61vw);
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
  }
  .container-photo{
    width: 72%;
    height: calc(47vw);
    position: relative;
    overflow: hidden;
    .photo {
      width: 100%;
      // height: 100%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
  .container-btn-upload {
    width: 42%;
    margin: calc(2vw) 0;
  }
  .container-btn-next {
    position: relative;
    top: 12px;
  }
}
</style>
